<template>
    <div>
        <el-row :gutter="24">
            <el-col :span="1"
                    style="margin-right:10px;">
                <p class="queryLabel">公司名称:</p>
            </el-col>
            <el-col :span="6"
                    style="float: left">
                <el-input size="small"
                          v-model="deptName"
                          icon="more"
                          @click="openDeptTree"
                          placeholder="选择公司"
                          style="width:120!important"
                          readonly
                          clearable></el-input>
            </el-col>
            <el-col :span="1"
                    style="margin-right:10px;">
                <p class="queryLabel">汽车品牌:</p>
            </el-col>
            <el-col :span="4">
                <el-select size="small"
                           v-model="bCode"
                           placeholder="请选择"
                           clearable>
                    <el-option v-for="item in brandCombo"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-col>
            <el-col :span="1">
                <el-button type="primary"
                           size="small"
                           v-on:click='query'>查询</el-button>
            </el-col>
            <el-col :span="1">
                <el-button type="primary"
                           size="small"
                           v-on:click='Reset'>重置</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="brandHis.dataList"
                          stripe
                          border
                          style="width: 100%"
                          highlight-current-row>
                    <el-table-column type="index"
                                     width="70"
                                     label="序号">
                    </el-table-column>
                    <el-table-column prop="oName"
                                     label="公司"
                                     width="140">
                    </el-table-column>
                    <el-table-column prop="preName"
                                     label="变更前品牌"
                                     width="240">
                    </el-table-column>
                    <el-table-column prop="bName"
                                     label="当前品牌"
                                     width="240">
                    </el-table-column>
                    <el-table-column prop="reason"
                                     label="变更原因">
                    </el-table-column>
                    <el-table-column label="变更日期"
                                     width="180"
                                     props="createTime"
                                     :formatter="formatTime"
                                     align="center">
                    </el-table-column>
                </el-table>
                <el-pagination small
                               @current-change="handleCurrentChange"
                               :current-page="curPage"
                               :page-sizes="page.pageSizes"
                               :page-size="page.pageSize"
                               layout=" total,prev, pager, next"
                               :total="brandHis.total">
                </el-pagination>
            </el-col>
        </el-row>
        <el-dialog title="选择公司"
                   v-model="deptShow"
                   size="small">
            <el-tree :data="deptTreeData"
                     :highlight-current=true
                     :props="defaultProps"
                     accordion
                     @node-click="handleNodeClick"></el-tree>
        </el-dialog>
    </div>
</template>
<script>
import moment from 'moment'
export default {
    data: function () {
        return {
            //分页设置
            page: this.page,
            //分组数据
            brandHis: {
                total: 0,
                dataList: []
            },
            //查询条件，组织
            deptCode: '',
            deptName: '',
            //查询条件、品牌编码
            bCode: '',
            //当前分组页
            curPage: 1,
            brandCovData: [],
            brandCombo: [],
            //组织机构转换
            deptConvertData: {},

            defaultProps: {
                children: 'child',
                label: 'oName'
            },

            deptShow: false,
            //树型数据
            deptTreeData: [],
            brandRule: {}

        }
    },
    computed: {

    },
    methods: {

        //分组查询
        query: function () {
            this.$http({
                method: 'GET',
                url: this.API_ROOT + '/base/brandHis/page',
                params: {
                    oId: this.$data.deptCode,
                    brandCode: this.$data.bCode,
                    start: this.$data.curPage,
                    limit: this.$data.page.pageSize
                }

            }).then(function (resp) {
                resp.data.total = parseInt(resp.data.total);
                // es5写法
                this.$data.brandHis = resp.data;
            }, function (error) {
                // error
            })
        },
        //重置按钮
        Reset: function () {
            this.$data.deptName = '';
            this.$data.bCode = '';
        },

        //字典分组,当前页切换
        handleCurrentChange: function (currentPage) {
            this.$data.curPage = currentPage;
            this.query();
        },
        //日期转换
        formatTime: function (row, column) {
            if (row.createTime == "" || row.createTime == null) return "";
            return moment(Number(row.createTime)).format("YYYY-MM-DD");
        },
        //日期转换
        convertDept: function (row, column) {
            return this.$data.deptConvertData[row.oId];
        },
        openDeptTree: function (e) {

            this.$data.deptShow = true;

        },
        //点击树节点
        handleNodeClick(data) {
            this.$data.deptName = data.oName;
            this.$data.deptCode = data.id;
        },

    },
    created: function () {
        //获取品牌转换

        this.$http.get(this.API_ROOT + '/base/brand/convert', {}).then((response) => {
            this.$data.brandCovData = response.data;
        }, (response) => { });
        //获取功品牌下拉
        this.$http.get(this.API_ROOT + '/base/brand/combo', {}).then((response) => {
            this.$data.brandCombo = response.data;
        }, (response) => { });
        //组织机构转换
        this.$http.get(this.API_ROOT + '/rbac/dept/convert', {
            params: {
                root: "0",
                type: "1"
            }
        }).then((response) => {

            this.$data.deptConvertData = response.data;

        }, (response) => { });

        //查询组织构构转换

        this.query();
        //获取部门资源树
        this.$http.get(this.API_ROOT + '/rbac/dept/tree', {
            params: {
                root: "0",
                type: "1",
            }
        }).then((response) => {
            this.$data.deptTreeData = response.data.dataList;

        }, (response) => { });


    }
}
</script>
<style>

</style>